import { useState, useEffect } from 'react';
import { StyleSheet, View, Text, useColorScheme, FlatList } from 'react-native';
import MyNoteCard from '../Components/MyNoteCard';
import { ActivityIndicator } from 'react-native';
import { SafeAreaView } from'react-native-safe-area-context';

// 模拟数据
// 调整模拟数据结构
const mockData = [
  {
    noteId: 1,
    imageUrl: 'https://picsum.photos/800/1200?random=1',
    title: '示例笔记 1',
    content: '这是示例笔记 1 的副标题',
    authorAvatarUrl: '',
    authorId: '作者  ',
    viewCount: 100,
    auditStatus: 1,
  },
  // 可以添加更多模拟数据
];

const MyNoteScreen = ({navigation}) => {
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    // 模拟加载延迟
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  const handleDelete = () => {
    console.log('删除笔记');
  };

  const handleEdit = () => {
    console.log('编辑笔记');
  };

  const renderItem = ({ item }) => (
    <MyNoteCard
      key={item.title}
      noteId={item.noteId}
      imageUrl={item.imageUrl}
      title={item.title}
      content={item.content}
      authorAvatarUrl={item.authorAvatarUrl}
      authorId={item.authorId}
      viewCount={item.viewCount}
      auditStatus={item.auditStatus}
      onDelete={handleDelete}
      onEdit={handleEdit}
      navigation={navigation}
    />
  );

  if (isLoading) {
    return (
      <View style={[styles.container, { backgroundColor: isDarkMode ? '#121212' : '#fff' }]}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  if (mockData.length === 0) {
    return (
      <View style={[styles.container, { backgroundColor: isDarkMode ? '#121212' : '#fff' }]}>
        <Text style={{ color: isDarkMode ? '#fff' : '#000' }}>未找到相关笔记</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: isDarkMode ? '#121212' : '#fff' }]}>
      <View style={[styles.container, { backgroundColor: isDarkMode ? '#121212' : '#fff' }]}>
        <FlatList
          data={mockData}
          renderItem={renderItem}
          keyExtractor={(item) => item.title}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
});

export default MyNoteScreen;
